<div class="detail-article tab-content">

  <!-- <form nz-form [nzLayout]="validateForm.controls?.formLayout?.value" 
    [formGroup]="validateForm" (ngSubmit)="submitForm()"> -->

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>食谱描述</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="12">
        <!-- <nz-input [(ngModel)]="articleParams.description" [nzSize]="'large'">
        </nz-input> -->
        <textarea row="4" nz-input [(ngModel)]="articleParams.description" style="min-height: 80px;"></textarea>
        <!-- <div nz-form-explain *ngIf="validateForm.controls.recipesName.dirty&&validateForm.controls.recipesName.hasError('required')">请输入原料名称!</div> -->
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>橱窗图</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="14">
        <p>最多可添加10张图片，建议图片尺寸800*800px，大小 ≤1 MB，支持JPG、PNG、JPEG</p> 
        <!--
          [nzSize]="1024 * 1"
          [nzSize]="100"
        -->
        <div>
          <nz-upload
            nzAction="{{fileUrl}}"
            nzListType="picture-card"
            [nzAccept]="'image/*'"
            [nzMultiple]="true"
            [nzLimit]="1"
            [(nzFileList)]="fileList"
            [nzShowButton]="fileList.length < 10"
            [nzBeforeUpload]="imgUpload"
            [nzPreview]="handlePreview">
              <i class="anticon anticon-plus"></i>
          </nz-upload>
          <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
            <ng-template #modalContent>
              <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
            </ng-template>
          </nz-modal>
        </div>

      </div>
    </div>

    <div class="loading_circle" *ngIf="textChange">
      <div class="loading_panel">
        <nz-progress [ngModel]="_loading" [nzType]="'circle'"></nz-progress>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>详细内容</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="18">
        <!--  
          [minLength]="0" 
          [maxLength]="500" 
          [readOnly]="isReadOnly"
          [required]="required" 
        -->
        <quill-editor [(ngModel)]="articleParams.details"
                      [style]="{minHeight: '300px', backgroundColor: '#fff'}"
                      [modules]="defaultModules"
                      [placeholder]="'开始编写吧...'"
                      (onEditorCreated)="handleEditorCreated($event)"
                      (onSelectionChanged)="handleSelection($event);"
                      [customOptions]="[{import: 'attributors/style/size', whitelist: ['14']}]"
                      (onContentChanged)="handleChange($event);">
        </quill-editor>
      </div>
    </div>

  <!-- </form> -->

</div>

<input type="file" id="articleFile" accept="image/*" multiple="multiple" (change)="articleFileChange($event)" style="opacity: 0;"/>

<div class="footer_panel" *ngIf="activeType === 'edit'">
  <div class="m-form-sub" *authority="['recipes/list/110']">
    <a (click)="saveActive()">确认</a><!--
    --><a (click)="goback()">取消</a>
  </div>
</div> 